<template>
  <div>
    <div class="flex full_w mb_20">
      <div class="flex p_left">
        <div class="phonebox">
          <el-carousel v-if="form.linkUrl.length" height="484px">
            
            <el-carousel-item v-for="item in form.linkUrl" :key="item">
              <img class="phoneitem" v-if="form.type==1" :src="item" alt="">
              <video v-if="form.type==2" :src="item" class="video-avatar" controls="controls">
                您的浏览器不支持视频播放
              </video>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <div class="p_right">
        <el-form
          ref="form"
          :model="form"
          label-width="80px"
          label-position="left"
        >
          <div class="f-16 pt_15 c_000 mb_25">开屏广告设置</div>
          <div class="f-14 c_000 mb_25">
            建议尺寸：750 * 1334px，拖拽图片可调整图片顺序哦，最多添加五张
          </div>
          <div class="f-14 c_000 mb_25">
            <!-- <span class="s_title"></span> -->
            <el-form-item label="开屏广告" prop="status">
              <el-switch
                v-model="form.status"
                active-color="#4A73FF"
                inactive-color="#ddd"
                :inactive-value="0"
                :active-value="1"
              >
              </el-switch>
            </el-form-item>
          </div>
          <div class="f-14 c_000 mb_25">
            <span class="s_title">停留时间</span>
            <el-input-number
              v-model="form.stop_time"
              :min="0"
              :max="10000"
              label="描述文字"
            ></el-input-number>
            <span class="pl_15 c_606">（单位：秒）</span>
          </div>
          <div class="f-14 c_000 mb_15">
            <span class="s_title">间隔时间</span>
            <el-input-number
              v-model="form.interval_time"
              :min="0"
              :max="10000"
              label="间隔时间"
            ></el-input-number>
            <span class="pl_15 c_606">（单位：小时）</span>
          </div>
          <div class="f-14 mb_25" style="color: #a5a5a5">
            备注：弹广告的频次，即N小时内进入不再显示广告页，0为每次进入都显示
          </div>
          <div class="innerbox full_w mb_10">
            <el-form-item label="图片名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入图片名称" />
            </el-form-item>
            <el-form-item label="链接地址" prop="link">
              <el-input v-model="form.link" placeholder="请输入链接地址" />
            </el-form-item>
            
            <el-form-item label="广告类型" prop="type">
              <el-radio-group v-model="form.type" @change="changeType">
                <el-radio :label="1">图片</el-radio>
                <el-radio :label="2">视频</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item v-if="form.type==1" label="上传图片" prop="url" class="mb_0">
              <image-upload v-model="form.url" :limit='5' />
            </el-form-item>
            <el-form-item v-if="form.type==2" label="上传视频" prop="url" class="mb_0">
              <video-upload v-model="form.url" :limit='5' :fileType='["mp4","ogv"]' />
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
    <div class="flexend">
      <el-button type="primary" @click="onSubmit">保 存</el-button>
    </div>
  </div>
</template>
<script>
import { uploadPhoto } from "@/api/comm";
import { activeData, getActiveData } from '@/api/sethome'
import VideoUpload from '@/components/VideoUpload'
import { isOverSize } from "@/utils/validate";
export default {
  data() {
    return {
      imgsrc:'',
      form: {
        status: 0,
        interval_time:'',
        stop_time:'',
        name:'',
        link:'',
        url:[],
        type:1,
      },
    };
  },
  components:{
    VideoUpload
  },
  created(){
    this.getInfo()
  },

  // computed:{
  //   imgUrl(){
  //     return this.form.url.map(item=>process.env.VUE_APP_BASE_API+'/'+item)
  //   }
  // },

  methods:{

    getInfo(){
      getActiveData().then(res=>{
        // if(res.data)
        // let data = res.data
        // this.form.status = data.status
        // this.form.interval_time = data.interval_time
        this.form = res.data
        this.form.linkUrl = this.form.url.map(item=>process.env.VUE_APP_BASE_API+'/'+item)
        this.form.type = Number(this.form.type)
        this.form.status = Number(this.form.status)
      })
    },

    // 上传图片
    changeImg(event, type) {
      var file = event.currentTarget.files[0];
      console.log("file:", file, event);
      if (isOverSize(file.size, 5)) {
        this.$message.warning("图片大小不能超过5MB");
        return;
      }
      var formData = new FormData();
      formData.append("file", file);
      formData.append("type", 'home');
      uploadPhoto(formData).then((res) => {
        if (res.code == 1) {
          // console.log('图片：',res.data);
          this.$message.success("上传成功");
          this.imgsrc = process.env.VUE_APP_BASE_API + "/" + res.data;
          this.form.url = res.data;
          document.getElementById("uploadimg").value = null;
        }
      });
    },

    changeType(){
      this.form.url = []
    },

    onSubmit(){
      let params ={
        status: this.form.status,
        interval_time: this.form.interval_time,
        stop_time: this.form.stop_time,
        name: this.form.name,
        link: this.form.link,
        type: this.form.type,
        // url: this.form.url,
      }
      params.url = Array.isArray(this.form.url)?this.form.url:this.form.url.split(',')
      activeData(params).then(()=>{
        this.$modal.msgSuccess("添加成功");
        this.getInfo()
      })
    },
  }
};
</script>
<style lang="scss" scoped>
.phonebox {
  width: 272px;
  height: 484px;
  border-radius: 22px;
  border: 4px solid #707070;
  overflow: hidden;
}
.phoneitem{
  width: 272px;
  height: 484px;
}
.p_left {
  padding: 20px;
}
.p_right {
  padding-top: 20px;
  width: calc(100% - 350px);

  ::v-deep .el-form-item__label {
    font-weight: normal;
    color: #000;
  }
}
.s_title {
  display: inline-block;
  width: 80px;
}
.innerbox {
  width: 100%;
  background-color: #f7f7f7;
  padding: 15px;
}
.addpic {
//   height: 36px;
  padding: 7px 20px;
  font-size: 14px;
  border-radius: 4px;
  border: 1px solid #4A73FF;
  color: #4A73FF;
  position: relative;
}
.uploadinput {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  cursor: pointer;
}
.video-avatar{
  width: 100%;
  height: 100%;
}
</style>